<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="所属事件" prop="eventId">
      <el-select v-model="newFormInline.eventId" placeholder="请选择事件">
        <el-option
          v-for="option in eventOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="段号" prop="section">
      <el-input
        v-model="newFormInline.section"
        type="number"
        placeholder="请输入段号"
      />
    </el-form-item>
    <el-form-item label="动作名称" prop="action">
      <el-input v-model="newFormInline.action" placeholder="请输入动作名称" />
    </el-form-item>
    <el-form-item label="动作参数" prop="actionParams">
      <el-input
        v-model="newFormInline.actionParams"
        type="textarea"
        placeholder="JSON格式参数"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, withDefaults, watch, onMounted } from "vue";
import { ActionFormProps } from "../componentsUtils/type/eventActionTypes";
import { formRules } from "../componentsUtils/rule/eventActionRules";

const props = withDefaults(
  defineProps<{
    formInline?: any;
    title?: string;
    eventOptions?: { label: string; value: number }[];
  }>(),
  {
    formInline: () => ({
      id: 0,
      dealerId: 0,
      tenantId: 0,
      eventId: 0,
      section: 0,
      action: "",
      actionParams: ""
    }),
    title: "",
    eventOptions: () => [
      {
        label: "无事件",
        value: 0
      }
    ]
  }
);

const newFormInline = ref(props.formInline);
const ruleFormRef = ref();

// 监听props变化，更新表单数据
watch(
  () => props.formInline,
  newValue => {
    newFormInline.value = { ...newValue };
  },
  { deep: true }
);
// 添加获取表单数据的方法
function getFormData() {
  return newFormInline.value;
}
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef, getFormData });
</script>
